<script>
export default {
    name: "MyTag",
    props: {
        value: String
    },
    data() {
        return {
            isEdit: false
        }
    },
    methods: {
        handleClick() {
            // 双击后切换到显示状态，并自动聚焦
            this.isEdit = true
            // 这样写是没有问题的，但是需要每一个都要写，我们将这个操作封装成一个全局指令
            // this.$nextTick(() => {
            //     this.$refs.inp.focus()
            // })
        },
        handleEnter(e) {
            // console.log(e.target.value)
            if (e.target.value.trim() === "") {
                return alert("标签内容不能为空！")
            }
            this.$emit("input", e.target.value)
            // 关闭输入状态
            this.isEdit = false
        }
    }
}
</script>

<template>
    <div class="my-tag">
        <input
            ref="inp"
            v-focus
            v-if="isEdit"
            class="input"
            type="text"
            placeholder="输入标签"
            :value="value"
            @keyup.enter="handleEnter"
            @blur="handleEnter"
        />
        <div class="text" v-else @dblclick="handleClick">
            {{ value }}
        </div>
    </div>
</template>

<style scoped lang="less">
.my-tag {
    cursor: pointer;

    .input {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 100px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;

        &::placeholder {
            color: #666;
        }
    }
}
</style>